﻿<template>
    <div id="app">
        <mt-header v-bind:title="title" style="background-color:#fda10e">
            <a slot="left" @click="back()">返回</a>

        </mt-header>

        <div class="mui-content">
            <form class="mui-input-group">
                <div class="mui-input-row">
                    <label>卡号</label>
                    <input type="text" v-model="number" placeholder="请输入学号">
                </div>


                <div class="mui-input-row">
                    <label>学生姓名</label>
                    <input type="text" v-model="truename" class="mui-input-speech mui-input-clear" placeholder="请输入学生姓名" data-input-clear="6" data-input-speech="6"><span class="mui-icon mui-icon-clear mui-hidden"></span><span class="mui-icon mui-icon-speech"></span>
                </div>
                <div class="mui-input-row">
                    <label>关系</label>
                    <span>{{relation}}</span>
                    <button type="button" @click="choose" class="mui-btn mui-btn-primary">选择</button>

                </div>
                <div class="mui-button-row">
                    <button type="button" class="mui-btn mui-btn-primary" @click="search">查找</button>&nbsp;&nbsp;


                </div>


            </form>
        </div>
        <div class="mui-content" v-if="show">
            <div class="title">
                选择学生
            </div>
            <ul class="mui-table-view">
                <li class="mui-table-view-cell" >
                    <a class="mui-navigate">
                        机构 ：{{student.mname}}
                    </a>
                </li>
                <li class="mui-table-view-cell" >
                    <a class="mui-navigate">
                        班级 ：{{student.classname}}
                    </a>
                </li>
                <li class="mui-table-view-cell" >
                    <a class="mui-navigate">
                        性别 :{{student.truename}}
                    </a>
                </li>
                <li class="mui-table-view-cell" >
                    <p style="text-align:center">
                        <button type="button" @click="bind()" class="mui-btn mui-btn-primary">绑定</button>
                    </p>
                </li>

            </ul>
        </div>




        <mt-popup v-model="popupVisible" style="width:100%;"
                  position="bottom">
            <Row style="margin-top:10px;">
                <Col span="12">
                <a style="text-align:center;width:100%;display:block;font-size:18px" @click="close">取消</a>
                </Col>
                <Col span="12">
                <a style="text-align:center;width:100%;display:block;font-size:18px" @click="savetype">确定</a>
                </Col>
            </Row>
            <mt-picker :slots="slots" @change="onValuesChange" v-if="visible"></mt-picker>
        </mt-popup>




    </div>

</template>

<script>

    import Bus from '../bus.js';
    import { Toast } from 'mint-ui';
    import { MessageBox } from 'mint-ui';
    export default {
        name: 'app',
        data() {
            return {
                number: "",
                truename: "",
                title: "绑定学生",
                visible: false,
                popupVisible: false,
                relation: "",
                student: {},
                show: false,
                slots: [

                    {
                        flex: 1,
                        values: ['请选择', '爸爸', '妈妈', '爷爷', '奶奶', '外公', '外婆'],
                        className: 'slot1',
                        textAlign: 'center'
                    }


                ],
                choosetypevalue: ""
            }
        },
        methods:
        {
            savetype: function () {
                if (this.$data.choosetypevalue != "请选择") {
                    this.$data.relation = this.$data.choosetypevalue;
                    this.$data.popupVisible = false;
                }

            },
            close: function () {
                this.$data.popupVisible = false;
            },
            onValuesChange: function (picker, values) {
                this.$data.choosetypevalue = values[0];
            },
            choose: function () {

                this.$data.popupVisible = true;
                this.$data.visible = true;



            },
            search: function () {
                var number = this.$data.number;
                var truename = this.$data.truename;
                var relation = this.$data.relation;
                var _this = this;
                if (number == "") {
                    Toast("请输入学号");
                } else {

                    this.$api.post('wx/Index/studentsearch', {
                        "number": number,
                        "truename": truename,
                    }, response => {
                        console.log(response.data);
                        if (response.status >= 200 && response.status < 300) {
                            var data = response.data;
                            if (data.status == 200) {
                                _this.$data.student = data.data;
                                _this.$data.show = true;
                            } else {
                                Toast(data.message);
                            }

                        } else {

                        }
                    });
                }


            },
            bind: function () {
                var _this = this;
                var number = this.$data.student.number;
                var truename = this.$data.student.truename;
                var userid = window.localStorage.getItem('userid');
                var relation = this.$data.relation;

                if (relation == "") {
                    Toast("请选择关系");
                    return;
                }


                MessageBox({
                    title: '提示',
                    message: '确定绑定' + truename + '吗?',
                    showCancelButton: true,
                    confirmButtonText: "确定",
                    cancelButtonText: "取消"
                }).then(action => {
                    if (action == 'confirm') {
                        this.$api.post('wx/Index/bingstudent', {
                            "number": number,
                            "truename": truename,
                            "userid": userid,
                            "relation": relation
                        }, response => {
                            console.log(response.data);
                            if (response.status >= 200 && response.status < 300) {
                                var data = response.data;
                                if (data.status == 200) {
                                    Toast(data.message);
                                    Bus.$emit('val', "show")
                                    window.localStorage.setItem('usertype', "1");
                                    window.localStorage.setItem('studentid', data.data.id);
                                    window.localStorage.setItem('mid', data.data.mid);
                                    _this.$router.push({ name: 'home', params: {} });
                                } else {
                                    Toast(data.message);
                                }

                            } else {
                                Toast("请求失败");
                                console.log(response.message);
                                //请求失败，response为失败信息
                            }
                        });

                    } else {



                    }

                });



            },

            back: function () {

                this.$router.go(-1);
            }
        },
        created: function () {


        }
    }
</script>

<style scoped>
</style>